<template>
  <div class="after-sale-list table-theme">
    <head-title title="运营--售后列表"></head-title>
    <div style="display: flex; margin-bottom: 50px">
      <div
        v-for="(item, index) in cardList"
        :key="index"
        style="margin-right: 20px"
      >
        <cardPanel
          :img="item.img"
          :title="item.title"
          :num="item.num"
          :color="item.color"
        ></cardPanel>
      </div>
    </div>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <tabs-view
            :list="classifyList"
            :tabsIndex="type"
            @roleType="roleType"
          ></tabs-view>
          <select-view
            :option-list="orderbyList"
            :value="order_by"
            placeholder="排序"
            type="order_by"
            @value="setSelectValue"
          >
          </select-view>
          <select-view
            :option-list="ascList"
            :value="asc"
            placeholder="排序"
            type="asc"
            @value="setSelectValue"
          >
          </select-view>
          <select-view
            :option-list="levelList"
            :value="level"
            placeholder="等级"
            type="level"
            label-name="level_name"
            value-name="after_level"
            @value="setSelectValue"
          >
          </select-view>
          <select-view
            :option-list="dutyList"
            :value="duty"
            placeholder="责任划分"
            type="duty"
            label-name="name"
            value-name="id"
            @value="setSelectValue"
            style="margin-top: 10px"
          >
          </select-view>
          <select-view
            :option-list="afterTypeList"
            :value="afterType"
            placeholder="售后类型"
            type="after"
            label-name="name"
            value-name="id"
            @value="setSelectValue"
            style="margin-top: 10px"
          >
          </select-view>
          <el-date-picker
            style="margin-top: 10px"
            v-model="dayValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="init(1)"
          >
          </el-date-picker>
        </div>

        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add">
            <el-button type="primary" @click="onOpenDialog">导出</el-button>
            <el-button type="primary" @click="onExport('cost')">导出费用</el-button>
            <el-button type="primary" @click="add">添加售后</el-button>
          </div>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column label="紧急程度" align="center">
          <template slot-scope="scope">
            <div
              class="urgency"
              v-if="scope.row.color_status != 1 && scope.row.color_status != 2"
            >
              <img
                src=""
                alt=""
              />
              <span style="color: #00d3af">普通</span>
            </div>
            <div class="urgency" v-if="scope.row.color_status == 1">
              <img
                src=""
                alt=""
              />
              <span style="color: #f7b84b">警告</span>
            </div>
            <div class="urgency" v-if="scope.row.color_status == 2">
              <img
                src=""
                alt=""
              />
              <span style="color: #e51c23">超时</span>
            </div>
          </template>
        </el-table-column>
		<el-table-column label="等级" align="center" prop="level_name"></el-table-column>
        <el-table-column
          label="序号"
          align="center"
          prop="order_after_id"
          width="60"
        >
        </el-table-column>
        <el-table-column
          label="提交时间"
          align="center"
          prop="add_time"
          width="100"
        ></el-table-column>
        <el-table-column
          label="订单号"
          align="center"
          prop="order_sn"
        ></el-table-column>
        <el-table-column
          label="商家"
          align="center"
          prop="store_name"
        ></el-table-column>
        <el-table-column label="店铺等级" align="center">
          <template slot-scope="scope">
            <i
              class="el-icon-medal"
              v-if="scope.row.level != 0 && scope.row.level < 5"
              :class="filterLevelColor(scope.row.level)"
            >
              <span>{{ scope.row.level | filterLevel }}</span>
            </i>
            <el-image
              v-else-if="scope.row.level == 5"
              style="width: 38px; height: 24px"
              :src="require('../../assets/image/interior.png')"
              fit="cover"
            ></el-image>
            <el-image
              v-else-if="scope.row.level == 6"
              style="width: 38px; height: 24px"
              :src="require('../../assets/image/new.png')"
              fit="cover"
            ></el-image>
            <span v-else-if="scope.row.level == 7">定制</span>
            <span v-else-if="scope.row.level == 0">未设置</span>
          </template>
        </el-table-column>
        <el-table-column
          label="运营人员"
          align="center"
          prop="follow_user"
        ></el-table-column>
        <el-table-column label="产品图" align="center" width="80">
          <template slot-scope="scope">
            <Img-popover :src="scope.row.sku_img"></Img-popover>
          </template>
        </el-table-column>
        <el-table-column label="整体图" align="center" width="80">
          <template slot-scope="scope">
            <Img-popover
              :src="scope.row.viceImages[0]"
              v-if="scope.row.viceImages.length != 0"
            ></Img-popover>
          </template>
        </el-table-column>
        <el-table-column label="细节图" align="center" width="80">
          <template slot-scope="scope">
            <Img-popover
              :src="scope.row.infoImages[0]"
              v-if="scope.row.infoImages.length != 0"
            ></Img-popover>
          </template>
        </el-table-column>
        <el-table-column label="包装图" align="center" width="80">
          <template slot-scope="scope">
            <Img-popover
              :src="scope.row.pageImages[0]"
              v-if="scope.row.pageImages.length != 0"
            ></Img-popover>
          </template>
        </el-table-column>
        <el-table-column label="视频" align="center" width="80">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              title=""
              trigger="hover"
              v-if="scope.row.after_video.length != 0"
            >
              <video
                :src="scope.row.after_video[0]"
                style="display: block; width: 300px"
                controls="controls"
              />
              <video
                slot="reference"
                :src="scope.row.after_video[0]"
                style="width: 50px; height: 50px; vertical-align: top"
              />
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="备注" align="center" prop="remarks" width="120"></el-table-column> -->
        <el-table-column
          label="责任划分"
          align="center"
          prop="dutyname"
          width="80"
        ></el-table-column>
        <el-table-column
          label="售后类型"
          align="center"
          prop="typename"
        ></el-table-column>
        <el-table-column
          label="售后描述(用户)"
          align="center"
          prop="content"
          width="200"
        ></el-table-column>
        <el-table-column
          label="进度时间"
          align="center"
          prop="progress_time"
          width="100"
        ></el-table-column>
        <el-table-column
          label="完成时间"
          align="center"
          prop="complete_time"
          width="100"
        ></el-table-column>
        <el-table-column
          label="进度内容"
          align="center"
          prop="progress_desc"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="marginbottom: 10px"
              size="mini"
              @click="goOrderDetails(scope.row.order_id)"
              >订单</el-button
            >
            <el-button
              type="primary"
              style="marginbottom: 10px; marginleft: 0px"
              size="mini"
              @click="edit(scope.row.order_after_id, scope.row.order_id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              style="marginleft: 0px"
              size="mini"
              @click="del(scope.row.order_after_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
			title="导出提示"
			:visible.sync="isExportShow"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			center
			width="400px">
			<el-form :model="exportForm" :rules="exportFormRules" label-width="70px">
			  <el-form-item label="页数" prop="page">
				  <el-input v-model.number="exportForm.page" placeholder="请输入页数"></el-input>
			  </el-form-item>
			  <el-form-item label="数条" prop="limit">
				  <el-input v-model="exportForm.limit" placeholder="请输入条数" disabled></el-input>
			  </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isExportShow = false">取 消</el-button>
				<el-button type="primary" @click="onExport('all')">导出</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
import cardPanel from "@/components/card-panel";
import ImgPopover from "@/components/ImgPopover";
import SelectView from "@/components/SelectView";
import TabsView from "@/components/TabsView";
export default {
  name: "after_sale_list",
  components: {
    cardPanel,
    ImgPopover,
    SelectView,
    TabsView,
  },
  data() {
    return {
      list: [],
      total: 0,
      totalData: 0,
      page: 0,
      level: "",
      selectContent: "",
      classSelect: "",
      optionList: [
        {
          value: 0,
          label: "序号",
        },
        {
          value: 1,
          label: "订单编号",
        },
        {
          value: 2,
          label: "订单商品编号",
        },
        {
          value: 3,
          label: "店铺名称",
        },
        {
          value: 4,
          label: "工厂ID",
        },
        {
          value: 5,
          label: "工厂编号"
        },
        {
          value: 6,
          label: "工厂风格编号"
        }
      ],
      classifyList: ["全部", "待查收", "协商方案", "处理方案", "处理完成"],
      duty: '',
      dutyList: [{
        id: 1,
        name: '客户'
      },{
        id: 2,
        name: '总部'
      },{
        id: 3,
        name: '工厂'
      },{
        id: 4,
        name: '物流'
      },{
        id: 5,
        name: '仓库'
      }],
      afterType: '',
      afterTypeList: [{
        id: 1,
        name: '驳回'
      },{
        id: 2,
        name: '换货'
      },{
        id: 3,
        name: '补件'
      },{
        id: 4,
        name: '修理'
      },{
        id: 5,
        name: '退货'
      },{
        id: 6,
        name: '其他'
      }],
      type: 1,
      status: 1,
      cardList: [
        {
          title: "订单售后总量",
          img: require("../../assets/image/ico_achievement.png"),
          num: "0",
          color: "#61A1F9",
        },
      ],
      asc: 2,
      order_by: "add_time",
      orderbyList: [
        {
          label: "提交时间",
          value: "add_time",
        },
        {
          label: "完成时间",
          value: "complete_time",
        },
      ],
      ascList: [
        {
          label: "升序",
          value: 1,
        },
        {
          label: "降序",
          value: 2,
        },
      ],
      dayValue: [],
      levelList: [],
      isExportShow:false,
      exportForm:{
        page:0,
        limit:50
      },
      exportFormRules:{
        page:[{required:true,message:'请输入页数'}],
        limit:[{required:true,message:'请输入条数'}]
      },
      pickerOptions: {
        disabledDate(date){
          return date.getTime() > Date.now() 
        },
        shortcuts: [{
          text: '当月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            // 当前几号
            let curDate = new Date().getDate() -1 
            start.setTime(start.getTime() - 3600 * 1000 * 24 * curDate);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text:'上个月',
          onClick(picker){
            // 计算上个月有多少天
            let lastDate = new Date()
            let lastMonth = lastDate.getMonth();
            lastDate.setMonth(lastMonth )
            lastDate.setDate(0)
            let lastSky = lastDate.getDate();
            // 计算这个月第几天
            let curDate = new Date().getDate();
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * (lastSky+curDate -1));
            end.setTime(end.getTime() - 3600 * 1000 * 24 * curDate);
            picker.$emit('pick', [start, end]);
          }
        }, 
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        asc: this.asc,
        order_by: this.order_by,
        after_level: this.level,
      };
      if (this.status == 0) {
        data.status = "";
      } else {
        data.status = this.status - 1;
      }
      if (this.classSelect == 0) {
        data.order_after_id = this.selectContent;
      } else if (this.classSelect == 1) {
        data.order_sn = this.selectContent;
      } else if (this.classSelect == 2) {
        data.rec_id = this.selectContent;
      } else if (this.classSelect == 3) {
        data.store_name = this.selectContent;
      } else if (this.classSelect == 4) {
        data.factory_id = this.selectContent;
      } else if (this.classSelect == 5) {
        data.factory_sn = this.selectContent
      } else if (this.classSelect == 6) {
        data.factory_style_sn = this.selectContent
      }
      if (this.dayValue) {
        data.start_time = this.dayValue[0];
        data.end_time = this.dayValue[1];
      }
      if(this.duty){
        data.duty = this.duty
      }
      if(this.afterType){
        data.type = this.afterType
      }
      this.$http(this.$ApiList.AfterSaleLists, data).then((res) => {
        this.list = [];
        res.datas.datas.forEach((item) => {
          let type = ["", "驳回", "换货", "补件", "维修", "退货", "其他"];
          let duty = ["", "客户", "总部", "工厂", "物流", "仓库"];
          item.typename = type[item.type];
          item.dutyname = duty[item.duty];
          item.viceImages = [];
          item.infoImages = [];
          item.pageImages = [];
          item.after_video = [];
          item.image.forEach((b) => {
            if (b.type == 1) {
              item.viceImages.push(b.image);
            } else if (b.type == 2) {
              item.infoImages.push(b.image);
            } else if (b.type == 3) {
              item.pageImages.push(b.image);
            } else if (b.type == 4) {
              item.after_video.push(b.image);
            }
          });

          this.list.push(item);
        });
        this.total = res.datas.counts;
        this.totalData = res.datas.counts;
        this.cardList[0].num = String(res.datas.order_count);
      });
    },
    del(id) {
      this.$confirm("此操作将删除这条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            order_after_id: id,
          };
          this.$http(this.$ApiList.DelateAfterSale, data).then((res) => {
            this.$layer.msg("删除成功");
            this.refreshPage();
          });
        })
        .catch(() => {});
    },
    refreshPage() {
      this.page = 1;
      this.selectContent = "";
      this.classSelect = 0;
      this.dayValue = [];
      this.init();
    },
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    add() {
      this.$router.push({ path: "/add_after_sale" });
    },
    edit(id, order_id) {
      this.$router.push({
        path: "/etit_after_sale",
        query: { id: id, order_id: order_id },
      });
    },
    goOrderDetails(id) {
      this.$router.push({ path: "/order_details", query: { id: id } });
    },
    roleType(index) {
      this.type = index;
      this.status = index;
      this.init(1);
    },
    filterLevelColor(data) {
      switch (data) {
        case 1:
          return "oneLevel";
          break;
        case 2:
          return "twoLevel";
          break;
        case 3:
          return "threeLevel";
          break;
        case 4:
          return "fourLevel";
          break;
        default:
          break;
      }
    },
    setSelectValue(obj) {
      const { type, value } = obj;
      console.log(type,value)
      switch (type) {
        case "order_by":
          this.order_by = value;
          break;
        case "asc":
          this.asc = value;
          break;
        case "level":
          this.level = value;
          break;
        case "duty":
          this.duty = value
          break
        case "after":
          this.afterType = value
          break
        default:
          break;
      }
      this.init(1);
    },
    getLevelList() {
      this.$http(this.$ApiList.getLevelList).then((res) => {
        this.levelList = res.datas;
        this.levelList.unshift({
          after_level: "",
          level_name: "全部",
        });
      });
    },
    onExport(type){
      if(type === 'cost'){
        let url = `${this.$domain}furniture/Adminexcel/AfterSalePriceDataExcel`;
        if(this.dayValue.length){
          url += `?start_time=${this.dayValue[0]}&end_time=${this.dayValue[1]}` 
        }
        window.location.href = url
      }else if(type === 'all'){
        let url = `${this.$domain}furniture/Adminexcel/AfterItemsDataExcel?secret=888&page=${this.exportForm.page}&limit=${this.exportForm.limit}`;
        if(this.classSelect == 4 && this.selectContent !== ''){
          url += `&factory_id=${this.selectContent}`
        }
        window.location.href = url
        this.isExportShow = false
      }
      
    },
    onOpenDialog(){
      this.isExportShow = true
    }
  },
  created() {
    this.init();
    this.getLevelList();
  },
  filters: {
    filterLevel(data) {
      switch (data) {
        case 1:
          return "A";
          break;
        case 2:
          return "B";
          break;
        case 3:
          return "C";
          break;
        case 4:
          return "D";
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.after-sale-list {
  .top-menu .client-view {
    margin-right: 10px;
  }
  /deep/.el-table .cell .el-button {
    margin-bottom: 10px;
    margin-left: 0;
  }
  /deep/ .el-date-editor .el-range-separator{
	  width: 8%;
  }
  .el-icon-medal {
    font-size: 40px;
    position: relative;
    > span {
      position: absolute;
      bottom: 7px;
      left: 50%;
      font-size: 16px;
      font-weight: 600;
      transform: translateX(-50%);
    }
  }
  .oneLevel {
    color: #e51c23;
  }
  .twoLevel {
    color: #3c8dbc;
  }
  .threeLevel {
    color: #009688;
  }
  .fourLevel {
    color: #141414;
  }
}
.urgency {
  text-align: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
}
</style>
